<template>
    <div class="page-login">
        <div class="login-top">
            <img src="@/assets/img/logo.png" alt="" class="logo" />
            <span>系统登录</span>
        </div>
        <el-form ref="loginFormRef" class="login-form" :model="loginForm" :rules="rules" label-width="60px">
            <el-form-item label="账号" prop="account">
                <el-input v-model="loginForm.account" @keyup.enter="submit"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password" show-password @keyup.enter="submit"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 100%" @click="submit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
import { LOGIN_COOKIE_KEY } from '@/constants';
import * as api from '@/constants/api';
import { thyCookie, thyReq, thyUrl } from '@thyiad/util';
import { ref, defineComponent, reactive } from 'vue';
import { ElForm } from 'element-plus';
import { FieldErrorList } from 'async-validator';

export default defineComponent({
    name: 'Login',
    components: {},
    setup() {
        const loginFormRef = ref<InstanceType<typeof ElForm>>();
        const loginForm = reactive({
            account: '',
            password: '',
        });

        return {
            loginFormRef,
            loginForm,
        };
    },
    data() {
        return {
            rules: {
                account: [
                    {
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur',
                    },
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                ],
            },
        };
    },
    methods: {
        submit() {
            this.loginFormRef?.validate((isValid?: boolean, invalidFields?: FieldErrorList) => {
                if (!isValid) {
                    return;
                }
                thyReq
                    .post<Record<string, any>>(api.Login, {
                        account: this.loginForm.account,
                        password: this.loginForm.password,
                    })
                    .then((token) => {
                        const baseHost = thyUrl.getBaseHost();
                        thyCookie.set(LOGIN_COOKIE_KEY, token, { domain: baseHost, expires: 365 });
                        this.$router.push({ path: '/dashboard' });
                    });
            });
        },
    },
});
</script>

<style lang="scss">
.page-login {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    .login-top {
        margin-top: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 16px;
        .logo {
            width: 45px;
            height: 45px;
            margin-right: 16px;
        }
        span {
            color: rgba(0, 0, 0, 0.85);
            font-weight: 600;
            font-size: 33px;
            font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
        }
    }
    .login-form {
        width: 368px;
        margin-left: auto;
        margin-right: auto;
    }
}
</style>
